<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:p="http://primefaces.org/ui"
		xmlns:pe="http://primefaces.org/ui/extensions"
		xmlns:pu="http://primefaces.org/ultima"
		xmlns:o="http://omnifaces.org/ui"
		xmlns:c="http://java.sun.com/jsp/jstl/core"
		xmlns:s="http://skyve.org/xml/ui"
		dir="#{bean.dir}">
	<f:view contentType="text/html" encoding="UTF-8">
		<h:head id="head">
			<f:facet name="first">
				<meta http-equiv="X-UA-Compatible" content="IE=edge" />
				<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
				<meta name="apple-mobile-web-app-capable" content="yes" />
				<meta name="theme-color" content="#{bean.getThemeColour('indigo')}" />
			</f:facet>
	
			<title>${project.description}</title>
			<base href="#{bean.baseHref}" />
			<!-- normally commented out for security reasons
			<h:outputText value="#{bean.skyveVersionComment}" escape="false" />
			-->	
			<ui:include src="/WEB-INF/pages/includes/favicon.xhtml" />
			<!-- 4.7 is disabled by default
			<link type="text/css" rel="stylesheet" href="fontawesome-4.7.0/css/font-awesome.min.css" />
			-->
			<link type="text/css" rel="stylesheet" href="fontawesome-6.5.1/css/all.min.css" />
			<link type="text/css" rel="stylesheet" href="skyve/css/prime-min.css?v=#{bean.webResourceFileVersion}" />
			<h:outputStylesheet name="css/ultima.css?v=#{bean.webResourceFileVersion}" library="skyve" />
			<link type="text/css" rel="stylesheet" href="pages/css/admin.css?v=#{bean.webResourceFileVersion}" />
			<h:outputScript name="ripple/ripple.js?v=#{bean.webResourceFileVersion}" library="layout" />
			<h:outputScript name="js/layout.js?v=#{bean.webResourceFileVersion}" library="layout" />
			<!-- Unsure why this isn't included by the menu component but I had to manually include it -->
			<h:outputScript name="js/layout.menu.js?v=#{bean.webResourceFileVersion}" library="layout" />
			<script type="text/javascript" src="skyve/prime/skyve-min.js?v=#{bean.webResourceFileVersion}"></script>
			<script type="text/javascript">
				<!-- PF8 doesnt work with touch on - a.swipe is not a function when registering swipeLeft and swipeRight -->
				PrimeFaces.env.touch=false;
				#{bean.apiScript}
				SKYVE.PF.establishHistory();
			</script>
			<ui:insert name="templateHead" />
		</h:head>
	
		<h:body id="body" styleClass="ui-input-filled">
			<h:panelGroup styleClass="skyveEnvBanner skyveTopEnvBanner" rendered="#{not empty bean.environmentIdentifier}">#{bean.environmentIdentifier}</h:panelGroup>
			<h:panelGroup styleClass="skyveEnvBanner skyveBottomEnvBanner" rendered="#{not empty bean.environmentIdentifier}">#{bean.environmentIdentifier}</h:panelGroup>
			<div class="#{showMenu ? 'layout-wrapper layout-menu-static layout-menu-light layout-menu-'.concat(bean.getThemeColour('indigo')).concat(' layout-topbar-').concat(bean.getThemeColour('indigo')) : 'layout-wrapper layout-topbar-'.concat(bean.getThemeColour('indigo'))}">
				<ui:include src="./topbar.xhtml">
					<ui:param name="showMenu" value="#{showMenu}" />
					<ui:param name="showSwitchMode" value="#{showSwitchMode}" />
					<ui:param name="showLogout" value="#{showLogout}" />
					<ui:param name="title" value="#{bean.title}" />
					<ui:param name="bean" value="#{bean}" />
				</ui:include>
	
				<!-- Include the menu if we need to show topbar dropdown as otherwise the dropdown click event is not registered -->
				<c:if test="#{not showMenu and (showSwitchMode or showLogout)}">
					<pu:menu />
				</c:if>

<!-- Click on different menu item within the same module makes the module accordion collapse
				<s:resetMenuState rendered="#{resetMenu}" />
-->
				<h:form id="menuform" prependId="false" rendered="#{showMenu}">
					<p:tooltip globalSelector=".layout-menu-slim .layout-root-menuitem > a, .layout-menu-slim .layout-inline-menu-action-item > a, .layout-menu-slim .layout-inline-menu-action"
								showEvent="mouseenter"
								hideEvent="mouseleave"
								styleClass="layout-menu-tooltip" />
					<div class="layout-menu-wrapper">
						<div class="layout-menu-container">
							<pu:menu widgetVar="leftMenu" id="leftMenu" model="#{menu.menu}" />
						</div>
					</div>
				</h:form>
				<div class="layout-main">
					<p:messages id="messages" widgetVar="messages" globalOnly="true" escape="false">
						<p:autoUpdate />
					</p:messages>
					<p:growl id="growl" widgetVar="growl" globalOnly="true" escape="false">
						<p:autoUpdate />
					</p:growl>
					<!-- Do not establish a socket for a public user (user in session but no principal established) -->
					<o:socket id="socket" widgetVar="socket" channel="skyve" user="#{sessionScope['user'].id}" onmessage="function(message) { SKYVE.PF.onPushMessage(message) }" rendered="#{not empty request.remoteUser}" />
					<!-- Need separate growl for push coz autoUpdated growl wont respond through javascript -->
					<p:growl id="pushGrowl" widgetVar="pushGrowl" for="push" escape="false" />
					<p:tooltip id="help" widgetVar="help" globalSelector="i" escape="false" />
					<p:confirmDialog id="confirm" global="true">
						<p:commandButton id="confirmCancel" 
											value="Cancel" 
											type="button"
											styleClass="ui-confirmdialog-no" 
											style="float:right;"
											icon="fa-solid fa-xmark" />
						<p:commandButton id="confirmOK" 
											value="OK" 
											type="button"
											styleClass="ui-confirmdialog-yes" 
											style="float:right;"
											icon="fa-solid fa-check" />
					</p:confirmDialog>
					<div class="layout-content">
						<ui:insert name="templateBody" />
					</div>
					<div class="layout-footer flex align-items-center justify-content-between flex-wrap gap-3 p-4 shadow-2">
						<h:graphicImage name="images/skyve-thick-grey.png" style="max-height: 30px;" library="skyve" />
						<div class="flex gap-2">
							<span>Version ${project.version}</span>
							<span class="fa-solid fa-copyright"></span>
							<span>All Rights Reserved</span>
			            </div>
			        </div>
				</div>
			</div>
	
			<p:ajaxStatus id="wheelOfDeath" styleClass="wheelOfDeath">
				<f:facet name="start">
					<i class="fa-solid fa-2x fa-circle-notch fa-spin ajax-loader" aria-hidden="true"></i>
				</f:facet>
				<f:facet name="complete">
					<h:outputText value="" />
				</f:facet>
			</p:ajaxStatus>
			<h:outputStylesheet name="styles/layout-light.css?v=#{bean.webResourceFileVersion}" library="layout" />
			<h:outputStylesheet name="primeflex/primeflex.min.css?v=#{bean.webResourceFileVersion}" library="layout"/>
			<h:outputStylesheet name="ripple/ripple.css?v=#{bean.webResourceFileVersion}" library="layout" />
		</h:body>
	</f:view>
</html>
